<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-06-05 11:21:02
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 15:31:42
 * @Description:
 *
-->

<template>
  <div
    :class="[
      'wrapper',
      placement === 'top' ? 'top' : placement === 'bottom' ? 'bottom' : '',
    ]"
    :style="{
      backgroundColor: wrapperColor,
      width: widthReal + 'px',
      height: heightReal + 'px',
    }"
  >
    <div
      class="scale-ctn"
      :style="{ width: formatWidth + 'px', height: formatHeight + 'px' }"
    >
      <div
        class="scale-box"
        :style="{
          transform: 'scale(' + scale + ',  ' + scale + ')',
          width: widthDesign + 'px',
          height: heightDesign + 'px',
        }"
      >
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScalBox2',
  props: {
    // 设计宽度
    widthDesign: {
      type: Number,
      default: 1920
    },
    // 设计高度
    heightDesign: {
      type: Number,
      default: 1080
    },
    // 容器实际宽度
    widthReal: {
      type: Number,
      default: window.innerWidth
    },
    // 容器实际高度
    heightReal: {
      type: Number,
      default: window.innerHeight
    },
    // 最外层容器颜色
    wrapperColor: {
      type: String,
      default: 'transparent'
    },
    // 主视图位置
    placement: {
      type: String,
      default: 'top'
    }
  },
  data() {
    return {
      scale: 1
    }
  },
  computed: {
    formatWidth() {
      return this.widthDesign * this.scale
    },
    formatHeight() {
      return this.heightDesign * this.scale
    }
  },
  mounted() {
    this.scale = this.computeScale()
  },
  methods: {
    /**
     * @description: 获取缩放比例
     * @return {*}
     */
    computeScale() {
      const sw = this.widthReal / this.widthDesign
      const sh = this.heightReal / this.heightDesign
      return sw < sh ? sw : sh
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;

  &.top {
    align-items: flex-start;
  }

  &.bottom {
    align-items: flex-end;
  }

  .scale-box {
    transform-origin: 0 0;
    transition: all 0.5s;
    overflow: hidden;
  }
}
</style>
